<template>
	<view class="container">
		<view class="head" :style="{ 'height': 104 + topDis + 'px' }">
			<image src='../../static/img/head-bg.png' class="full" mode="aspectFill"></image>
			<view class="box" :style="{ 'padding-top': topDis + 'px' }">
				<view class="inputBox" @click="$Jump.Open('./search/search')">
					<view class="input flex-ac">
						<image src="../../static/img/ss.png" mode=""></image>
						<input type="text" placeholder="查询订单" v-model="searchWords" disabled placeholder-style="color: #999" />
					</view>
				</view>
				<view class="navBox">
					<u-tabs2 bgColor="transparent" inactive-color="#666666" :barWidth="110" :height="100"
						active-color="#1684FC" :list="navlist" :is-scroll="false" :current="currentStatus"
						@change="change"></u-tabs2>
				</view>
			</view>
		</view>
		<view class="body">
			<swiper :indicator-dots="false" :autoplay="false" :interval="3000" :duration="1000" class="swiper"
				@change="swiperChange" :current="currentStatus">
				<swiper-item v-for="(itemA, indexA) in navlist" :key="indexA">
					<view class="swiper-item">
						<scroll-view v-if="currentStatus === indexA" scroll-y="true" class="scrollView"
							@scrolltolower="getList()" :refresher-enabled='true' :refresher-triggered='isFresh'
							@refresherrefresh='freshList_()' refresher-background='#f7f7f7'>
							<u-gap height="10"></u-gap>
							<view class="item" v-for="(item, index) in list" :key="index"
								@click.stop="lookDetail(item)">
								<view class="tit flex-ac flex-b">
									<view class="flex-ac" style="color: #1684FC;">{{ item.orderSn }}</view>
									<view style="line-height: 80rpx; color: #FD9600;" v-if="item.status == 1">待调度</view>
									<view style="line-height: 80rpx; color: #FD9600;" v-if="item.status == 2">运输中</view>
									<view style="line-height: 80rpx; color: #333333;" v-if="item.status == 3">已完成</view>
								</view>
								<view class="content">
									<view class="info">
										<view class="time flex-ac">
											<view class="zuhangxie flex-ac">
												<view class="zhuang">装</view>
												<view>
													<div>发货人：{{ item.senderName || '' }}-{{ item.senderMobile || '' }}
													</div>
													<div style="margin-top: 6rpx;" class="flex-ac">
														<div>{{ item.loadingAddress || '' }}</div>
														<image @click="$Common.openMap(item.loadingLongitude, item.loadingLatitude, item.loadingAddress)" src='../../static/img/dh.png' mode="aspectFit"></image>
													</div>
												</view>
											</view>
										</view>
										<view class="time flex-ac" style="margin-top: 20rpx">
											<view class="zuhangxie flex-ac">
												<view class="xie">卸</view>
												<view>
													<div>收货人：{{ item.receiverName || '' }}-{{ item.receiverMobile || ''
														}}
													</div>
													<div style="margin-top: 6rpx;" class="flex-ac">
														<div>{{ item.unloadingAddress || '' }}</div>
														<image @click="$Common.openMap(item.unloadingLongitude, item.unloadingLatitude, item.unloadingAddress)" src='../../static/img/dh.png' mode="aspectFit"></image>
													</div>
												</view>
											</view>
										</view>
										<view class="time flex-ac" style="padding-left: 60rpx;">
											<view>客户名称：{{ item.customerName || '' }}</view>
										</view>
										<view class="time flex-ac flex-b" style="padding-left: 60rpx;">
											<view>里程：{{ item.mileage || '' }}</view>
											<view>额定油耗：{{ item.oilConsum || '' }}</view>
										</view>
										<view class="time flex-ac flex-b" style="padding-left: 60rpx;">
											<view>品名：{{ item.goodsName || '' }}</view>
											<view>单价：<text v-if="item.price">{{ item.price.toFixed(2) }}</text> </view>
										</view>
										<view class="time flex-ac flex-b" style="padding-left: 60rpx;">
											<view>创建：{{ item.createTime || '' }}</view>
										</view>
										<view class="time flex-ac flex-b" style="padding-left: 60rpx;">
											<view style="width: 100%;" class="Line1">备注：{{ item.remark || '' }}</view>
										</view>
									</view>
									<view class="menuBox flex-ac" v-if="currentStatus === 0">
										<view class="bj flexmid" @click.stop="sureRelease(index, item.id)">提交调度</view>
										<view class="bj" @click.stop="editOrder(index, item.id)">编辑</view>
										<view class="zf" @click.stop="voidOrder(index, item.id)">作废</view>
									</view>
									<view class="menuBox flex-ac" v-if="currentStatus === 1">
										<view class="bj flexmid" @click.stop="dispatchOrder(item.id)">立即调度</view>
										<view class="bj" @click.stop="dispatchDone(index, item.id)">调度完成</view>
										<view class="bj" @click.stop="feedback(index, item.id)">异常反馈</view>
										<view class="bj" @click.stop="editOrder(index, item.id)">编辑</view>
										<view class="zf" @click.stop="voidOrder(index, item.id)">作废</view>
									</view>
									<view class="menuBox flex-ac" v-if="currentStatus === 2">
										<view class="bj"
											@click.stop="$Jump.Open('./createGoods/createGoods?type=3&id=' + item.id)">
											复制货源</view>
									</view>

								</view>
							</view>
							<x-nothing v-if="list.length === 0"></x-nothing>
							<u-gap height="2"></u-gap>
						</scroll-view>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 新增订单 -->
		<view class="addGoodsBox flexmid">
			<image src="../../static/img/add.png" mode="" @click="$Jump.Open('./createGoods/createGoods')"></image>
		</view>
	</view>
</template>

<script>
import { goodsType } from '@/utils/goodsType.js'; // 
export default {
	data() {
		return {
			topDis: this.$app.globalData.topDis,
			navlist: [{
				name: '待调度'
			}, {
				name: '调度中'
			}, {
				name: '已结束',
			}],
			currentStatus: 0,
			isFresh: false,
			queryForm: {
				current: 1,
				size: 10,
			},
			orderStatus: 'pending',
			list: [],
			goodsType: goodsType,
			searchWords:''
		}
	},
	onLoad() {

	},
	onShow() {
		this.queryForm.current = 1
		this.getList()
	},
	watch: {
		currentStatus() {
			this.queryForm.current = 1
			this.list = []
			if (this.currentStatus === 0) {
				this.orderStatus = 'pending'
				this.getList()
			} else if (this.currentStatus === 1) {
				this.orderStatus = 'dispatching'
				this.getList()
			} else if (this.currentStatus === 2) {
				this.orderStatus = 'completed'
				this.getList()
			}
		},
	},
	methods: {
		swiperChange(e) {
			this.currentStatus = e.detail.current
			console.log('index:', e.detail.current)
		},
		lookDetail(item) {
			this.$Jump.Open('./goodsInfo/goodsInfo?id=' + item.id)
		},
		dispatchDone(index, id) {
			uni.showModal({
				title: '提示',
				content: '是否确认调度完成？',
				success: (res) => {
					if (res.confirm) {
						this.$Net.post('/order/dispatchCompete/' + id).then(res => {
							this.$Toast.messageIcon('操作成功')
							setTimeout(() => {
								this.list.splice(index, 1)
							}, 1000);
						})
					}
				}
			})
		},
		// 订单调度
		dispatchOrder(id) {
			this.$Jump.Open('./dispatch/dispatch?id=' + id)
		},
		// 作废  voidOrder
		voidOrder(index, id) {
			uni.showModal({
				title: '提示',
				content: '确定要作废吗?',
				success: (res) => {
					if (res.confirm) {
						console.log('确认')
						this.$Net.post('/order/invalid/' + id).then(res => {
							this.$Toast.messageIcon('操作成功')
							setTimeout(() => {
								this.list.splice(index, 1)
							}, 1000);
						})
					}
				}
			})
		},
		// 切换导航
		change(index) {
			this.currentStatus = index;
		},
		// 确认发布
		sureRelease(index, id) {
			uni.showModal({
				title: '提示',
				content: '是否确认提交调度？',
				success: (res) => {
					if (res.confirm) {
						console.log('确认发布')
						this.$Net.post('/order/submitDispatch/' + id).then(res => {
							this.$Toast.messageIcon('操作成功')
							setTimeout(() => {
								this.list.splice(index, 1)
							}, 1000);
						})
					}
				}
			})
		},
		editOrder(index, id){
			this.$Jump.Open('./createGoods/createGoods?id=' + id)
		},
		// 异常反馈
		feedback(index, id) {
			this.$Jump.Open('./feedback/feedback?id=' + id)
		},
		// 订单列表 
		getList() {
			this.$Net.get(`/order/page/${this.orderStatus}`, this.queryForm).then(res => {
				console.log('订单列表:', res)
				if (this.queryForm.current == 1) {
					this.list = res.data
				} else {
					this.list = this.list.concat(res.data)
				}
				this.queryForm.current++
				setTimeout(() => {
					this.isFresh = false
				}, 500)
			})
		},
		// 下拉刷新
		freshList_() {
			this.queryForm.current = 1
			this.isFresh = true
			this.getList()
		},

		// 获取商品名称
		getGoodsTypeName(code) {
			for (let i = 0; i < this.goodsType.length; i++) {
				if (this.goodsType[i].value == code) {
					return this.goodsType[i].label
					break
				}
			}
		}

	}
}
</script>

<style lang="scss" scoped>
.addGoodsBox {
	position: fixed;
	right: 20rpx;
	bottom: 280rpx;
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	background-color: #1684FC;
	z-index: 10;

	image {
		width: 40rpx;
		height: 40rpx;
	}
}

.body {
	width: 100%;
	height: calc(100vh - 148px);

	.swiper {
		width: 100%;
		height: 100%;

		.swiper-item {
			width: 100%;
			height: 100%;
			overflow: hidden;
		}
	}

	.scrollView {
		width: 100%;
		height: 100%;
	}

	.item {
		width: 100%;
		background-color: #fff;
		margin-bottom: 20rpx;
		position: relative;

		.content {
			padding: 20rpx;
			padding-top: 0;

			.menuBox {
				padding-top: 20rpx;
				flex-direction: row-reverse;

				.fb {
					width: 170rpx;
					height: 70rpx;
					background: #1684FC;
					border-radius: 10rpx;
					color: #fff;
					font-size: 30rpx;
					margin-left: 20rpx;
				}

				.bj {
					padding: 14rpx 16rpx;
					background-color: #1684FC;
					border-radius: 5px;
					color: #fff;
					font-size: 26rpx;
					line-height: 42rpx;
					margin-left: 20rpx;
				}

				.zf {
					padding: 14rpx 16rpx;
					border: 1px solid #FF0000;
					border-radius: 5px;
					color: #FF0000;
					font-size: 26rpx;
					line-height: 42rpx;
					margin-left: 20rpx;
				}
			}

			.money {
				margin-top: 20rpx;
				width: 100%;
				padding-right: 20rpx;
				text-align: right;

				.num {
					width: 100%;
					font-size: 40rpx;
					color: #F66923;
					font-weight: bold;
					line-height: 56rpx;
				}

				.text {
					font-size: 26rpx;
					color: #F66923;
				}

				.opac {
					opacity: 0.5;
				}
			}

			.info {
				// margin-top: 20rpx;
				width: 100%;
				// height: 210rpx;
				background: #fafafa;
				border-radius: 20rpx;
				padding: 24rpx 20rpx;

				.time {
					width: 100%;
					margin-bottom: 10rpx;

					view {
						font-size: 26rpx;
						color: #101010;
					}

					image {
						width: 40rpx;
						height: 40rpx;
					}

					.zuhangxie {
						.zhuang {
							flex-shrink: 0;
							width: 52rpx;
							height: 52rpx;
							font-size: 30rpx;
							color: #fff;
							background-color: #2BBC4A;
							border-radius: 4rpx;
							line-height: 52rpx;
							text-align: center;
							margin-right: 10rpx;
						}

						.xie {
							flex-shrink: 0;
							margin-top: 6rpx;
							width: 52rpx;
							height: 52rpx;
							font-size: 30rpx;
							color: #fff;
							background-color: #1684FC;
							border-radius: 4rpx;
							line-height: 52rpx;
							text-align: center;
							margin-right: 10rpx;

						}
					}
				}

				.time:last-child {
					margin-bottom: 0;
				}
			}

			.label {
				width: 100%;
				margin-top: 10rpx;

				// font-size: 24rpx;
				.hd {
					.label-1 {
						font-size: 26rpx;
						padding: 2rpx 10rpx;
						color: #3DB020;
						border: 2rpx solid #3db020;
						border-radius: 6rpx;
						line-height: 36rpx;
						margin-right: 10rpx;
					}

					.label-2 {
						color: #F66923;
						border: 2rpx solid #F66923;
					}

					.label-3 {
						color: #666666;
						border: 2rpx solid #666666;
					}

					.label-1:last-child {
						margin-right: 0;
					}
				}

				.bd {
					color: #999;
					font-size: 26rpx;
				}

				.opac {
					opacity: 0.5;
				}

				.hui {
					color: #999 !important;
					border-color: #999 !important;
				}
			}

			.dz {
				font-size: 34rpx;
				font-weight: bold;

				.md {
					width: 48rpx;
					height: 48rpx;
					margin: 0 20rpx;
				}

				.hui {
					color: #999;
				}
			}
		}

		.tit {
			width: 100%;
			// background: #ffffff;
			padding: 0 20rpx;

			// border-bottom: 1rpx solid #F5F7FB;
			view {
				height: 80rpx;
			}
		}
	}
}

.head {
	width: 100%;
	height: 148px;
	position: relative;
	background-color: #fff;
	.box {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
		width: 100%;

		.inputBox {
			width: 100%;
			height: 108rpx;
			padding-left: 30rpx;
			padding-top: 4rpx;

			.input {
				width: 480rpx;
				height: 80rpx;
				background: rgba(255, 255, 255, .8);
				border-radius: 20rpx;
				padding: 0 30rpx;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 20rpx;
				}

				input {
					font-size: 30rpx;
					color: #333;
					flex: 1;
				}
			}
		}

		.navBox {
			width: 100%;
			height: 100rpx;
		}
	}

}
</style>